<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('新增图片')}" />
    <link rel="stylesheet" href="/static/css/picture-add.css">
</head>
<body class="hold-transition">
<!-- Site wrapper -->
<div class="container-fluid mt-2 mb-2">
    <!-- Main content -->
    <form class="form-horizontal m" id="form-picture-add">
        <div class="card-body">
            <div class="form-group row">
                <label class="col-sm-2 col-form-label is-required text-sm-right">图片</label>
                <div class="col-sm-9">
                    <div id="view-pics">
                        <div class="upload-drag" id="upload-drag">
                            <i class="fa fa-cloud-upload"></i>
                            <p>点击上传</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label is-required text-sm-right">分类</label>
                <div class="col-sm-3">
                    <input id="categoryId" name="categoryId" type="hidden"/>
                    <input class="form-control" type="text" id="categoryName" placeholder="请选择分类" readonly="readonly">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label is-required text-sm-right">标题</label>
                <div class="col-sm-6">
                    <input id="title" name="title" class="form-control" placeholder="请输入标题名称" type="text" required>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label is-required text-sm-right">专集</label>
                <div class="col-sm-2 pt-2">
                    <label for="createAlbum"><input type="checkbox" value="1" name="createAlbum" id="createAlbum"> 创建专集</label>
                </div>
            </div>
            <div class="form-group row" id="album-intro" style="display:none">
                <label class="col-sm-2 col-form-label is-required text-sm-right">专集简介</label>
                <div class="col-sm-8">
                    <textarea name="intro" class="form-control" rows="5" placeholder="请输入专集简介"></textarea>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label is-required text-sm-right">等级</label>
                <div class="col-sm-2">
                    <select id="levelId" name="levelId" class="form-control m-b" th:with="type=${memberTypes}" required>
                        <option value="0">普通</option>
                        <option th:each="dict : ${type}" th:text="${dict.title}" th:value="${dict.id}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label is-required text-sm-right">售价</label>
                <div class="col-sm-2">
                    <input name="price" class="form-control" value="0"  type="text" required>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label is-required text-sm-right">属性</label>
                <div class="col-sm-2 pt-2">
                    <label for="isElite"><input type="checkbox" value="1" name="isElite" id="isElite"> 推荐</label>
                    &nbsp;&nbsp;&nbsp;
                    <label for="isTop"><input type="checkbox" value="1" name="isTop" id="isTop"> 固顶</label>
                </div>
            </div>
            <div class="row">
                <label class="col-sm-2"></label>
                <div class="col-sm-10">
                    <input name="channelId" th:value="${channelId}" type="hidden"/>
                    <button type="button" class="btn btn-primary" onclick="submitPicture()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                    <button type="button" class="btn btn-danger" onclick="parent.layer.closeAll()"><i class="fa fa-reply-all"></i>关 闭 </button>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:insert="~{include :: footer}" />
<script src="/static/libs/layui-v2.6.8/layui.js"></script>
<script type="text/javascript">
    var channelId = [[${channelId}]];
    var pictureList = [];
    var selectList = [];//过滤已选择的文件用

    $(function () {
        $("#createAlbum").change(function () {
            if ($(this).prop("checked")) {
                $("#album-intro").css("display", "");
            } else {
                $("#album-intro").css("display", "none");
            }
        })
    });
</script>
<script src="/static/js/picture-add.js"></script>
</body>
</html>